<template>
  <div class="search-detail">
    <nav class="nav">
      <div class="nav-item">
        <div
          class="title"
          :class="{ active: showSort || sortText != '综合排序' }"
          @click="changeShow('showSort')"
        >
          {{ sortText }}
        </div>
      </div>
      <div class="nav-item">
        <div
          class="title"
          :class="{ active: showChannel || channelText != '全部频道' }"
          @click="changeShow('showChannel')"
        >
          {{ channelText }}
        </div>
      </div>
      <div class="nav-item">
        <div
          class="title"
          :class="{ active: showFilter || orderText != '筛选' }"
          @click="changeShow('showFilter')"
        >
          {{ orderText }}
        </div>
      </div>
      <div class="nav-item-content" v-show="showSort">
        <div
          class="nav-item-content-tag"
          :class="{ active: option.sort == 0 }"
          @click.stop="option.sort = 0"
        >
          综合排序
        </div>
        <div
          class="nav-item-content-tag"
          :class="{ active: option.sort == 1 }"
          @click.stop="option.sort = 1"
        >
          销量最高
        </div>
        <div
          class="nav-item-content-tag"
          :class="{ active: option.sort == 2 }"
          @click.stop="option.sort = 2"
        >
          人气最旺
        </div>
        <div
          class="nav-item-content-tag"
          :class="{ active: option.sort == 3 }"
          @click.stop="option.sort = 3"
        >
          最新上架
        </div>
        <div
          class="nav-item-content-tag"
          :class="{ active: option.sort == 4 }"
          @click.stop="option.sort = 4"
        >
          最近更新
        </div>
      </div>
      <div class="nav-item-content" v-show="showChannel">
        <div
          class="nav-item-content-tag"
          :class="{ active: option.channel == 0 }"
          @click.stop="option.channel = 0"
        >
          全部频道
        </div>
        <div
          class="nav-item-content-tag"
          :class="{ active: option.channel == 1 }"
          @click.stop="option.channel = 1"
        >
          男生
        </div>
        <div
          class="nav-item-content-tag"
          :class="{ active: option.channel == 2 }"
          @click.stop="option.channel = 2"
        >
          女生
        </div>
        <div
          class="nav-item-content-tag"
          :class="{ active: option.channel == 3 }"
          @click.stop="option.channel = 3"
        >
          出版
        </div>
      </div>
      <div class="nav-item-content" v-show="showFilter">
        <div class="nic-item">
          <div class="nic-item-title">完结状态</div>
          <div class="nic-item-content">
            <div
              class="nic-item-tag"
              :class="{ active: option.bookStatus == 0 }"
              @click.stop="option.bookStatus = 0"
            >
              全部
            </div>
            <div
              class="nic-item-tag"
              :class="{ active: option.bookStatus == 1 }"
              @click.stop="option.bookStatus = 1"
            >
              完结
            </div>
            <div
              class="nic-item-tag"
              :class="{ active: option.bookStatus == 2 }"
              @click.stop="option.bookStatus = 2"
            >
              连载
            </div>
          </div>
        </div>
        <div class="nic-item">
          <div class="nic-item-title">书籍价格</div>
          <div class="nic-item-content">
            <div
              class="nic-item-tag"
              :class="{ active: option.pay == 0 }"
              @click.stop="option.pay = 0"
            >
              全部
            </div>
            <div
              class="nic-item-tag"
              :class="{ active: option.pay == 1 }"
              @click.stop="option.pay = 1"
            >
              免费
            </div>
            <div
              class="nic-item-tag"
              :class="{ active: option.pay == 2 }"
              @click.stop="option.pay = 2"
            >
              包月
            </div>
            <div
              class="nic-item-tag"
              :class="{ active: option.pay == 3 }"
              @click.stop="option.pay = 3"
            >
              收费
            </div>
          </div>
        </div>
        <div class="nic-item">
          <div class="nic-item-title">书籍字数</div>
          <div class="nic-item-content">
            <div
              class="nic-item-tag"
              :class="{ active: option.wordCount == 0 }"
              @click.stop="option.wordCount = 0"
            >
              全部
            </div>
            <div
              class="nic-item-tag"
              :class="{ active: option.wordCount == 1 }"
              @click.stop="option.wordCount = 1"
            >
              30万字以下
            </div>
            <div
              class="nic-item-tag"
              :class="{ active: option.wordCount == 2 }"
              @click.stop="option.wordCount = 2"
            >
              30-50万字
            </div>
            <div
              class="nic-item-tag"
              :class="{ active: option.wordCount == 3 }"
              @click.stop="option.wordCount = 3"
            >
              50-100万字
            </div>
            <div
              class="nic-item-tag"
              :class="{ active: option.wordCount == 4 }"
              @click.stop="option.wordCount = 4"
            >
              100万字以上
            </div>
          </div>
        </div>
      </div>
    </nav>
    <section
      class="search-detail-content"
      title="搜索内容"
      v-if="searchList?.length"
    >
      <div class="search-detail-content-title">书城</div>
      <div
        class="search-item"
        v-for="(item, index) in searchList"
        :key="index"
        @click.stop="toDetail(item)"
      >
        <div class="img-box">
          <img :src="item.cover" alt="" />
        </div>
        <div class="right">
          <div>
            <div class="title">{{ item.title }}</div>
            <div class="author">{{ item.author }}/{{ item.category }}</div>
          </div>
          <div class="my-text des">{{ item.summary }}</div>
        </div>
      </div>
    </section>
    <section class="search-detail-content center" v-else>暂无内容</section>
  </div>
</template>

<script>
export default {
  props: ["keyword", "searchIndex", "searchList"],
  data: () => {
    return {
      list: [],
      showSort: false,
      showChannel: false,
      showFilter: false,
      page: 1,
      option: {
        sort: 0, //排序
        channel: 0, //频道
        bookStatus: 0, //完结状态
        pay: 0, //收费
        wordCount: 0, //字数
      },
    };
  },
  computed: {
    sortText() {
      let text = "";
      switch (this.option.sort) {
        case 0:
          text = "综合排序";
          break;
        case 1:
          text = "销量最高";
          break;
        case 2:
          text = "人气最旺";
          break;
        case 3:
          text = "最新上架";
          break;
        case 4:
          text = "最近更新";
          break;
      }
      return text;
    },
    channelText() {
      let text = "";
      switch (this.option.channel) {
        case 0:
          text = "全部频道";
          break;
        case 1:
          text = "男生";
          break;
        case 2:
          text = "女生";
          break;
        case 3:
          text = "出版";
          break;
      }
      return text;
    },
    orderText() {
      let text = "";
      if (
        this.option.wordCount != 0 &&
        this.option.pay != 0 &&
        this.option.bookStatus != 0
      ) {
        text = "已筛选";
      } else {
        text = "筛选";
      }
      return text;
    },
  },
  watch: {
    option: {
      handler() {
        this.showSort = false;
        this.showChannel = false;
        this.getData();
      },
      deep: true,
    },
  },
  methods: {
    //跳书籍详情
    toDetail(item) {
      this.api.toDetail(item, this, true);
    },
    //变更展开的选项
    changeShow(key) {
      let temp = this[key];
      this.showSort = this.showChannel = this.showFilter = false;
      this[key] = !temp;
    },
    //让父组件执行搜索
    getData() {
      this.$emit("callSearchList", { option: this.option, page: this.page });
    },
  },
};
</script>

<style lang="scss" scoped>
.search-detail {
  width: 100%;
  box-sizing: border-box;
  background-color: var(--bgc-gray);
  .nav {
    position: sticky;
    left: 0;
    top: 0.54rem;
    width: 100%;
    height: 0.4rem;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--bgc-white);
    .nav-item {
      flex: 1;
      height: 100%;
      color: var(--text-gray);
      .title {
        width: 100%;
        height: 100%;
        text-align: center;
        line-height: 0.4rem;
        transition: 0.3s;
      }
      .active {
        background-color: var(--bgc-gray);
        color: var(--text-red);
      }
    }
    .nav-item-content {
      position: absolute;
      left: 0;
      top: 0.4rem;
      z-index: 1;
      width: 100%;
      background-color: var(--bgc-gray);
      .nav-item-content-tag {
        width: 100%;
        height: 0.5rem;
        padding: 0 0.3rem;
        line-height: 0.5rem;
        box-sizing: border-box;
        color: var(--text-gray);
        transition: 0.3s;
      }
      .active {
        color: var(--text-red);
      }
      .nic-item {
        width: 100%;
        color: var(--text-gray);
        box-sizing: border-box;
        padding: 0 0.15rem;
        .nic-item-title {
          font-size: 0.14rem;
          margin: 0.15rem 0;
        }
        .nic-item-content {
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          .nic-item-tag {
            padding: 0 0.15rem;
            height: 0.34rem;
            line-height: 0.34rem;
            border-radius: 0.06rem;
            background-color: var(--bgc-white);
            color: var(--text-gray);
            font-size: 0.14rem;
            margin-right: 0.1rem;
            margin-bottom: 0.1rem;
            transition: 0.3s;
          }
          .active {
            background-color: var(--bgc-red2);
            color: var(--text-white);
          }
        }
      }
    }
  }
  .search-detail-content {
    width: 100%;
    background-color: var(--bgc-white);
    .search-detail-content-title {
      height: 0.4rem;
      line-height: 0.4rem;
      background-color: var(--bgc-gray);
      box-sizing: border-box;
      padding: 0 0.15rem;
    }
    .search-item {
      width: 100%;
      box-sizing: border-box;
      padding: 0.15rem;
      display: flex;
      .img-box {
        width: 0.73rem;
        min-width: 0.73rem;
        aspect-ratio: 73/106;
      }
      .right {
        flex-grow: 1;
        margin-left: 0.2rem;
        font-size: 0.13rem;
        box-sizing: border-box;
        padding: 0.05rem 0;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        color: var(--text-gray);
        .title {
          font-size: 0.16rem;
          color: var(--text-black);
        }
        .author {
        }
        .des {
          -webkit-line-clamp: 2;
        }
      }
    }
  }
  .center {
    text-align: center;
    padding-top: 0.3rem;
    font-size: 0.16rem;
    color: var(--text-gray);
  }
}
</style>